<template>
  <div>
    <br />
    <div>{{ about }}</div>
    <button @click="about += 1">About加1</button>
    <br />
    <about-son></about-son>
    <br />
    <router-link to="/about/news">News</router-link>
    <router-link to="/about/msg">Msg</router-link>
    <!-- vue3写法 -->
    <router-view v-slot="{ Component }">
      <keep-alive include="News">
        <component :is="Component"></component>
      </keep-alive>
    </router-view>
    <!-- vue2写法 -->
    <!-- <keep-alive include="News">
      <router-view></router-view>
    </keep-alive> -->
  </div>
</template>
<script>
import AboutSon from "./Aboutson.vue";
export default {
  beforeCreate() {
    console.log("beforeCreate", "about");
  },
  created() {
    console.log("created", "about");
  },
};
</script>
<script setup>
console.log("setup", "about");
const about = ref("About");
onBeforeMount(() => {
  console.log("onBeforeMount", "about");
});
onMounted(() => {
  console.log("onMounted", "about");
});
onBeforeUpdate(() => {
  console.log("onBeforeUpdate", "about");
});
onUpdated(() => {
  console.log("oneUpdated", "about");
});
onBeforeUnmount(() => {
  console.log("onBeforeUnmount", "about");
});
onUnmounted(() => {
  console.log("onUnmounted", "about");
});
</script>

<style lang="scss" scoped></style>
